{extend name='table'}
{block name="style"}
<style>
    .layui-table td .layui-table-cell {
        height: auto !important;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        word-break: break-all;
    }
    .layui-table td .layui-table-grrid-down{
        display: none;
    }
    .panel_left {
        width: 180px;
        flex-shrink: 0;
        margin-right: 20px;
    }
    .panel_right {
        width: calc(100% - 200px);
    }
    .auth_title {
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #EEE;
        font-weight: bold;
    }
    .auth_item img {
        height: 24px;
        width: auto;
        margin-left: 20px;
    }
    .auth_block {
        cursor: pointer;
    }
    .auth_block.active {
        background-color: #e0f1ff;
        border-right: 5px solid #008aff;
    }
    .auth_item {
        margin: 0 20px;
        padding: 10px 0;
        border-left: 1px dotted #9dbdd6;
        position: relative;
    }
    .auth_item:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 14px;
        top: 22px;
        border-top: 1px dotted #9dbdd6;
    }
</style>
{/block}


{block name="content"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content">
        {include file='/order/index_search'}
        <table id="OrderList" lay-filter="OrderList" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
    </div>
</div>
<script>

    var maxWidth = window.innerWidth;
    var maxHeight = window.innerHeight;

    $(function () {
        let form = layui.form
        // 隐藏hover
        $('.layui-tab-content').on('mouseenter', "tr", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).find('.layui-table-grid-down').hide();
        })
        $('.layui-tab-content').on('mouseenter', ".layui-table-cell", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).siblings('.layui-table-grid-down').hide();
        })
        $('.layui-tab-content').on('mouseenter', ".no_hover", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).parent().siblings('.layui-table-grid-down').hide();
        })
        $('#OrderList').layTable({
            even: true, height: 'full',toolbar: '#bar',
            cols: [[
                {checkbox: true, fixed: true},
                // {field: 'LAY_NUM', title: '{:lang("序号")}', width: 100, align: 'center', },
                {field: 'info', title: '{:lang("基本信息")}', align: 'left', minWidth: 120,templet:"#baseTpl"},
                {field: 'money', title: '{:lang("金额")}',  align: 'left', minWidth: 100, templet:"#PayMoneyTpl"},
                {field: 'order_data', title: '{:lang("订单信息")}', align: 'center', minWidth: 110,templet:"#orderTpl"},
                {field: 'buy_user', title: '{:lang("买家")}', align: 'center', minWidth: 110,templet:"#BuyTpl"},
                {field: 'status_info', title: '{:lang("状态")}', align: 'center', minWidth: 100, templet:"#StatusTpl"},
                {field: 'create_at', title: '{:lang("时间")}', minWidth: 202, align: 'left',templet:"#CreateAtTpl"},
                {toolbar: '#toolbar', title: '{:lang("操作面板")}', align: 'center', minWidth: 100, fixed: 'right'}
            ]],
            done: function(res, curr, count){

                //动态监听表头高度变化，冻结行跟着改变高度
                $(".layui-table-header tr").resize(function () {
                    $(".layui-table-header  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body tr").resize(function () {
                    $(".layui-table-body  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                })
            }
        });

        // 切换平台

        // 工具栏事件
        // layui.table.on('toolbar(OrderList)', function(obj){

        //     let id = obj.config.id;
        //     let form_data = layui.form.val('order_search_form');
        //     switch(obj.event){
        //         case 'syncOrder':
        //             httpRequest('{:url("pullOrder")}', {platform_id:form_data.platform_id}, 'post', function(msg) {
        //                 $.msg.success(msg, 3)
        //             })
        //             break;

        //     };

        // });

        // 指向元素为 `<select lay-filter="test"></select>` 的选择事件
        form.on('select(platform)', function(data){
            getShopList()
        });

        // 指向元素为 `<select lay-filter="test"></select>` 的选择事件
        form.on('select(account)', function(data){
            getShopList()
        });
    });

    function getShopList() {
        let form_data = form.val('order_search_form')
        if(!isNotEmpty(form_data.account_id) || !isNotEmpty(form_data.platform_id)){
            return false
        }
        let search_data = {
            account_id: form_data.account_id,
            platform_id: form_data.platform_id
        }
        $.ajax({
            url: "{:sysuri('common/ajax/getShopList')}",
            type: 'post',
            data: search_data,
            dataType: 'json',
            success: function(res) {
                if (res.code == 1) {
                    let data = res.data;
                    let html = '<option value="">{:lang("请选择")}</option>';
                    for (let i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    }
                    $('select[name="shop_id"]').html(html);
                    form.render('select');
                }else{
                    $.msg.error('选择店铺：'+res.info)
                    return false;
                }
            },
            error: function(err){
                $.msg.error(err.status + err.statusText);
            }
        })
    }
</script>


<!-- 列表排序权重模板 -->
<script type="text/html" id="SortInputTpl">
    <input type="number" min="0" data-blur-number="0" data-action-blur="{:sysuri()}" data-value="id#{{d.id}};action#sort;sort#{value}" data-loading="false" value="{{d.sort}}" class="layui-input text-center">
</script>

<script type="text/html" id="toolbar">
    <!--{if auth("edit")}-->
    <a class="layui-btn layui-btn-sm" data-title="{:lang('详情')}" data-offset="['60px','200px']" data-area="['{{maxWidth-210}}px', '{{maxHeight-60}}px']" data-modal='{:url("info")}?id={{d.id}}'>{:lang('详情')}</a>
    <!--{/if}-->
</script>

<!--基本信息-->
<script type="text/html" id="baseTpl" >
    <div>
        <span>{:lang('平台')}：{{ d.platform_name }}</span><br>
        <span>{:lang('店铺')}：{{ d.shop_name }}</span><br>
        <span>{:lang('国家')}：{{ d.country }}</span><br>
    </div>
</script>

<!--订单信息-->
<script type="text/html" id="orderTpl" >
    <div>
        <span>{:lang('编号')}：{{ d.order_no }}</span><br>
        <span>{:lang('单号')}：{{ d.order_number }}</span><br>
        <span>{:lang('支付方式')}：{{ d.pay_way }}</span><br>
        <span>{:lang('物流')}：{{ d.express_compay }}</span><br>
        <span>{:lang('物流单号')}：{{ d.express_number }}</span><br>
        <span>{:lang('取消原因')}：{{ d.cancel_reason }}</span><br>
    </div>
</script>

<!--金额-->
<script type="text/html" id="PayMoneyTpl" >
    <div>
        <span>支付金额：{{ d.pay_money }} {{ d.money_unit }}</span><br>
        <span>运费金额：{{ d.freight_money }} {{ d.money_unit }}</span><br>
        <span>折扣金额：{{ d.discount_money }} {{ d.money_unit }}</span><br>
        <span>退款金额：{{ d.refund_money }} {{ d.money_unit }}</span><br>
    </div>
</script>


<!--收货人-->
<script type="text/html" id="BuyTpl" >
    <div>
        <span>购买人：{{ d.buy_user }}</span><br>
        <span>手机号：{{ d.buy_mobile }}</span><br>
        <span>城市：{{ d.user_city }}</span><br>
        <span>地址：{{ d.user_address }}</span><br>
    </div>
</script>

<!--时间操作人-->
<script type="text/html" id="CreateAtTpl" >
    <div class="custom_style">
        <div>{:lang('下单时间')}：{{ d.order_time }}</div>
        <div>{:lang('截止出货时间')}：<span class="layui-font-red">{{ d.shipment_deadline_time }}</span></div>
        <div>{:lang('发货时间')}：{{ d.delivery_time }}</div>
    </div>
</script>

<!--头部按钮-->
<script type="text/html" id="bar">
    <div class="layui-btn-container">
        <!-- {if auth("pullOrder")} -->
        <button class="layui-btn layui-btn-sm layui-btn-normal" data-area="['600px','400px']" data-title="{:lang('同步订单')}" data-modal='{:url("pullOrder")}' data-table-id="OrderList" data-close-refresh='OrderList'>同步订单</button>
        <!-- {/if} -->
        <!-- {if auth("syncOrderTojy")} -->
        <button class="layui-btn layui-btn-sm layui-btn-normal" data-area="['500px','350px']" data-rule="id#{id};shop_id#{shop_id}" data-modal="{:url('syncOrderTojy')}" data-table-id="OrderList">推送订单到集运</button>
        <!-- {/if} -->
    </div>

</script>

<!--同步状态-->
<script type="text/html" id="StatusTpl" >
    <div>
        {:lang('订单状态')}：<span  class="layui-badge layui-bg-green">{{d.status_name}}</span><br>
        {:lang('同步状态')}：<span class="layui-badge layui-bg-red">{{d.status_msg}}</span><br>
        {{#  if(d.sync_status == 1){ }}
        {:lang('推送状态')}：<span class="layui-badge layui-bg-red">{{d.sync_status_name}}</span>
        {{#  } else if(d.sync_status == 3) { }}
        {:lang('推送状态')}：<span class="layui-badge layui-bg-blue">{{d.sync_status_name}}</span>
        {{#  } else { }}
        {:lang('推送状态')}：<span class="layui-badge layui-bg-green">{{d.sync_status_name}}</span>
        {{#  } }}
    </div>
</script>
{/block}
